<template>
	<view>

		<campHeader></campHeader>

		<view class="camp-wrapper">
			<view class="camp-list">
				<u-list @scrolltolower="handleLoadMore">
					<u-list-item v-for="(item, index) in campList" :key="index">
						<view class="camp-item" @click="handleToDetail(item.campId)">
							<view class="camp-img">
								<image :src="item.coverImg" mode="aspectFill"></image>
								<view class="camp-cate">{{item.categoryName}}</view>
							</view>
							<view class="camp-title">{{item.campName}}</view>
						</view>
					</u-list-item>
					<view class="footer-wrapper">- 伴你一起探索新世界 -</view>
				</u-list>
			</view>
		</view>



	</view>
</template>
<script>
	import campHeader from './components/campHeader';

	import {
		getCampList
	} from '@/api/camp.js'
	import {
		dateFormat
	} from '@/utils/util.js'

	const pageSize = 10

	export default {
		components: {
			campHeader
		},
		data() {
			return {
				// 页面参数
				options: {},

				isTop: 0, //
				pageNo: 1, //页码
				campList: [],
				categoryId: ''
			}
		},
		onLoad(options) {
			this.options = options
			this.getCampList()
		},
		onShow() {},
		mounted() {
			this.isTop = (uni.getSystemInfoSync().statusBarHeight + 43) + 'px'
		},
		/**
		 * 分享微信好友
		 */
		onShareAppMessage() {
			return {
				path: `/pages/index/index`,
				imageUrl: `/static/img/sharePost.jpg`,
			}
		},
		methods: {

			// 获取营地列表
			getCampList() {
				const that = this
				let {
					categoryId,
					pageNo
				} = that
				return new Promise((resolve, reject) => {
					getCampList({
							'categoryId': categoryId,
							'pageNum': pageNo,
							'pageSize': pageSize,
						})
						.then(res => {
							if (that.pageNo == 1) {
								that.campList = res.rows
							} else if (res.rows.length == 0) {
								that.pageNo--
							} else {
								that.campList = that.campList.concat(res.rows)
							}
							that.pageNo++
						})
				})
			},

			// 加载更多
			handleLoadMore() {
				let that = this
				that.getCampList()
			},

			// 跳转营地详情
			handleToDetail(campId) {
				this.$util.navTo('pages/camp/detail', {
					campId
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.camp-wrapper {
		.camp-list {
			.camp-item {
				box-sizing: border-box;
				padding: 32rpx;
				color: #1A1311;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					display: block;
					left: 32rpx;
					right: 32rpx;
					border-top: 1rpx solid #1A1311;
				}

				.camp-img {
					position: relative;
					height: 360rpx;
					border-radius: 24rpx;
					overflow: hidden;

					image {
						display: block;
						width: 100%;
						height: 100%;
					}

					.camp-cate {
						display: block;
						position: absolute;
						top: 24rpx;
						left: 24rpx;
						background-color: #fff;
						padding: 0 16rpx;
						font-size: 24rpx;
						line-height: 48rpx;
						border-radius: 24rpx;
					}
				}

				.camp-title {
					font-size: 48rpx;
					font-weight: bold;
					margin-top: 32rpx;
				}
			}
		}
	}

	.footer-wrapper {
		font-size: 24rpx;
		color: rgba(0, 0, 0, .4);
		padding: 64rpx 32rpx;
		text-align: center;
	}
</style>
